@for (agent of agents(); track agent.key) {
  <xpert-agent-identity [agent]="agent" class="w-full mb-2 p-2 border-[0.5px] border-solid border-divider-deep rounded-lg shadow-sm" />
}

@for (item of toolCalls(); track item.call.id; let index = $index) {
  <label class="font-semibold pb-2">{{item.info?.title || item.info?.name}}</label>
  <div class="flex flex-col gap-1">
    @for (param of item.parameters; track param.name) {
      <div class="flex justify-start items-start gap-2">
        <div class="w-24 shrink-0 whitespace-normal text-sm">{{param.title | i18n}}
          <div><ngm-slash-svg class="inline-block"/><span class="text-primary-500">{{param.name}}</span></div>
        </div>
        <textarea class="flex-1 p-1 rounded-md border border-gray-300 focus:ring-primary-500 focus:border-primary-500 text-sm text-text-secondary focus:text-text-primary"
          [disabled]="readonly()"
          [placeholder]="param.placeholder | i18n"
          [ngModel]="item.call.args[param.name]"
          (ngModelChange)="updateParam(index, param.name, $event)"
        ></textarea>
      </div>
    }
  </div>
}

<div class="mt-4 flex justify-between space-x-2">
  <button type="button" class="btn disabled:btn-disabled btn-primary h-8 flex-1 space-x-2"
    [disabled]="readonly()"
    (click)="onConfirm()"
  >
    <div class="w-full flex justify-center">{{ 'PAC.Xpert.Confirm' | translate: {Default: 'Confirm'} }}</div>
  </button>

  <button type="button" class="btn disabled:btn-disabled h-8 btn-danger pressable flex-1"
    [disabled]="readonly()"
    (click)="onReject()"
  >
    <div class="w-full text-center">
      <i class="ri-close-line"></i>
      {{ 'PAC.Xpert.Reject' | translate: { Default: 'Reject' } }}
    </div>
  </button>
</div>